<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统管理</title>
</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>图书管理系统后台</title>
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_3329812_qy6i42p5n8s.css">
        <!-- 引入jquery -->
        <script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js"></script>
        <link rel="stylesheet" href="./css/background/systemctrol.css">
        <!-- 引入js -->
        <script src="./js/background/systemctrol.js"></script>
    </head>

    <body>
        <!-- 左边的大导航栏 -->
        <div class="feature">
            <p>图书管理后台</p>
            <!-- 管理员信息 -->
            <div class="administrator">
                <div class="avatar">
                    <img src="./imgs/imgs10.jpeg">
                    <div class="administrator-detail">
                        <a href="#">超级管理员</a>
                        <a href="#"><i class="iconfont icon-yuandian common"></i>在线</a>
                    </div>
                </div>
            </div>
            <!-- 导航栏-功能 -->
            <div class="menu-list">
                <ul>
                    <li class="first-menu"><a href="./homepage.html"><i class="iconfont icon-zhuye common"></i>主页</a>
                    </li>
                    <li class="first-menu"><a href="javascript:;" class="displays"><i
                                class="iconfont icon-xitong common"></i>系统管理
                            <i class="iconfont icon-jiantouxia"></i></a>
                        <ul class="display-ul">
                            <li class="second-menu"><a href="javascript:;">图书管理</a></li>
                        </ul>
                    </li>

                    <li class="first-menu"><a href="javascript:;" class="displays1"><i
                                class="iconfont icon-jiaose common"></i>角色管理
                            <i class="iconfont icon-jiantouxia"></i></a>
                        <ul class="display-ul1">
                            <li class="second-menu"><a th:href="@{/userInformation}">用户角色</a></li>
                            <li class="second-menu"><a th:href="@{/history}">用户还书借书</a></li>
                        </ul>
                    </li>
                </ul>
            </div>


        </div>

        <!-- 右边内容 -->
        <div class="right-nav">
            <!-- 退出登录-弹框遮盖层 -->
            <div class="container-log">
                <!-- 弹出框 -->
                <div class="leave">
                    <p>是否退出登录？</p>
                    <button class="dump-common certain">确定</button>
                    <button class="dump-common cancel">取消</button>
                </div>
            </div>


            <!-- 顶部导航信息 -->
            <div class="information">
                <a href="#" class="information-user">超级用户<i class="iconfont icon-jiantouxia"></i>
                    <ul class="list">
                        <li class="out">退出登录</li>
                    </ul>
                </a>
                <a href="#"><i class="iconfont icon-shezhi1"></i></a>
            </div>

            <!-- 中间部分 -->
            <div class="center">
                <!-- 二级菜单提示 -->
                <div class="title">
                    <p><i class="iconfont icon-tushu-books"></i>系统管理>图书管理</p>
                </div>

                <!-- 按书名、作者等分类查询图书数量（搜索框） -->
                <div class="search search-form">
<!--                    <form action="#" method="post" class="search-form">-->
                        <!-- 按书名 -->
                        <div class="book search-common">
                            <label>书名</label>
                            <input type="text" id="bookName" placeholder="搜索书名" />
                        </div>

                        <!-- 按作者 -->
                        <div class="author search-common">
                            <label>作者</label>
                            <input type="text" id="author" placeholder="搜索作者" />
                        </div>

                        <!-- 按类型 -->
                        <div class="kind search-common">
                            <label>类型</label>
                            <input type="text" id="kind" placeholder="搜索类型" />
                        </div>
                        <div class="search-common">
                            <input type="submit" value="搜索" title="提交" id="admit">
                            <input type="reset" value="清空" title="清空" id="clearly">
                        </div>

<!--                    </form>-->
                </div>

                <!-- 增删改查功能 -->
                <div class="function" >
                    <a type="button" class="btn" th:href="@{/bookAdd}"><i class="iconfont icon-tianjia"></i>添加</a>
                </div>

                <!-- 删除-弹框遮盖层 -->
                <div class="container">
                    <!-- 弹出框 -->
                    <div class="dump">
                        <p>是否删除该书籍？</p>
                        <button class="dump-common decision" value="true">确定</button>
                        <button class="dump-common vanish">取消</button>
                    </div>
                </div>
                <!-- 遮盖层-确定按钮成功弹框 -->
                <div class="success-tip">
                    <p><i class="iconfont icon-chenggong"></i>修改成功！</p>
                </div>
                <!-- 遮盖层-确定按钮失败弹框 -->
                <div class="failure-tip">
                    <p><i class="iconfont icon-shibai"></i>修改失败！</p>
                </div>

                <!-- 最底层遮盖层 -->
                <div class="frame">
                    <div class="frame-content">
                        <p>图书管理>编辑</p>
                        <!-- 编辑框 -->
                        <div class="message">

                                <div class="books book-id displayid">
                                    <label>id:</label>
                                    <input type="text" value="{{book.id}}">
                                </div>
                                <div class="books book-name">
                                    <label>书名:</label>
                                    <input type="text" class='bookName' value="{{book.name}}">
                                </div>
                                <div class="books book-number">
                                    <label>书号:</label>
                                    <input type="text" class='bookNumber' value="{{book.number}}">
                                </div>
                                <div class="books book-author">
                                    <label>作者:</label>
                                    <input type="text" class='bookAuthor' value="{{book.author}}">
                                </div>
                                <div class="books book-publish">
                                    <label>出版社:</label>
                                    <input type="text" class='bookPublish' value="{{book.borrow}}">
                                </div>
                                <div class="books book-price">
                                    <label>价格:</label>
                                    <input type="text"  class='bookPrice' value="{{book.return}}">
                                </div>
                                <div class="books book-type">
                                    <label>类型:</label>
                                    <input type="text" class='bookType' value="{{book.isreturn}}">
                                </div>
                                <div class="books book-text">
                                    <label>内容:</label>
                                    <input type="text" class='bookContext' value="{{book.type}}">
                                </div>
                                <div class="admition">
                                    <button class="admit-common update" type="button">编辑</button>
                                    <button class="admit-common removal" type="button">取消</button>
                                </div>

                        </div>
                    </div>
                </div>



                <!-- 表单 -->
<!--                <form action="#">-->
                    <div class="importants">
                        <table border="1" cellpadding="0" cellspacing="0" class="tables">
                            <!-- 表头 -->
                            <tr class="firstTr">
                                <th width="5%" class="displayid">id</th>
                                <th width="10%">书名</th>
                                <th width="5%">书号</th>
                                <th width="10%">作者</th>
                                <th width="12%">出版社</th>
                                <th width="5%">价格</th>
                                <th width="10%">类别</th>
                                <th width="20%">内容简介</th>
                                <th width="15%">操作</th>
                            </tr>
<!--                            <c:forEach var="news" items="${newslist}" varStatus="status">-->
                                <tbody class="ss">
<!--                                    <td class="displayid">-->
<!--                                        ${news.id }-->
<!--                                    </td>-->
<!--                                    <td class="displayid">-->
<!--                                        ${news.booksid }-->
<!--                                    </td>-->
<!--                                    <td>-->
<!--                                        ${news.newsname }-->
<!--                                    </td>-->
<!--                                    <td>-->
<!--                                        ${news.author }-->
<!--                                    </td>-->
<!--                                    <td>-->
<!--                                        ${news.time }-->
<!--                                    </td>-->
<!--                                    <td>-->
<!--                                        ${news.time }-->
<!--                                    </td>-->
<!--                                    <td>-->
<!--                                        ${news.time }-->
<!--                                    </td>-->
<!--                                    <td>-->
<!--                                        ${news.time }-->
<!--                                    </td>-->
<!--                                    <td class="functional-borrow">-->
<!--                                        <button class="edit sames" title="编辑" type="button"> 编辑</button>-->
<!--                                        <button class="detail sames" title="详细" type="button"> 详请</button>-->
<!--                                        <button class="delete sames" title="删除"> 删除</button>-->
<!--                                    </td>-->

                                </tbody>

                        </table>

                    </div>
<!--                </form>-->

                <div class="proceeding">

                </div>

                <div class="page-normal">
<!--                    <span class="page-prev">&lt;</span>-->
<!--                     数字1 代表当前页面-->
<!--                    <a class="page-current">1</a>-->
<!--                    <a href="#">2</a>-->
<!--                    <a href="#">3</a>-->
<!--                    <a href="#">&gt;</a>-->
                </div>
            </div>
        </div>
    </body>

    </html>
</body>

</html>